<%@ page language="java" import="com.util.StringFinal" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
	String userid = request.getSession().getAttribute("user_id") == null
			? ""
			: request.getSession().getAttribute("user_id").toString();
String rolename = request.getSession().getAttribute("role_name") == null
? ""
: request.getSession().getAttribute("role_name").toString();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
<link rel="stylesheet" type="text/css" href="../../css/background.css" />

<script type="text/javascript" src="../../bootstrap-3.3.7/dist/js/jquery.min.js"></script>
<script type="text/javascript" src="../../bootstrap-3.3.7/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="../../js/bootstrap-paginator.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../bootstrap-3.3.7/docs/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script type="text/javascript" src="../../js/wordcontrol.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<%@include file="../common/header.jsp"%>
			</div>
		</div>
		<input type="text" id="id" value="<%=request.getParameter("id")%>" hidden="true"> 
		<input type="text" id="userid" value="<%=request.getParameter("userid")%>" hidden="true">
		<input type="text" id="touserid" value="<%=request.getParameter("touserid")%>" hidden="true">
		<div class="row" style="height: 780px; margin-top: 30px;margin-left:50px;margin-right:30px">
			<div class="col-md-12" style="min-height: 500px;">
				<ul class="media-list" id="info" style="padding-left: 0px;">
				</ul>
			</div>
			<div class="col-md-12">
				<div class="col-md-7"></div>
				<div class="col-md-5">
					<ul id="paginator"></ul>
				</div>
			</div>
			<div class="col-md-2"></div>
			<div class="col-md-8" id="comment" style="margin-top: 10px; text-align: center;">
				<textarea id="add_content" onKeyUp="ControlWordCount(&quot;add_content&quot;,&quot;count&quot;,<%=StringFinal.message_length%>)" rows="6" cols="104" placeholder="请发表您的评论"></textarea>
				<button type="button" class="btn btn-default" onclick="addMessage(&quot;不公开&quot;)" style="float: right; margin-left: 5px">私密回复</button>
				<button type="button" class="btn btn-default" onclick="addMessage(&quot;公开&quot;)" style="float: right; margin-left: 5px">公开回复</button>
				<p style="float: right; margin-top: 5px">
					你还可以输入<span id="count"><%=StringFinal.message_length%></span>个字
				</p>
			</div>
			<div class="col-md-2"></div>

			<div>
				<div class="col-md-12">
					<%@include file="../common/bottom.jsp"%>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
    //当前登录用户id
    var userid = '<%=userid%>';
    var useridd;
    var role= '<%=rolename%>';
    var message_length=<%=StringFinal.message_length%>;
	var totalpage;
	var currentpage;
	var rows = 4;
	$(function() {
		if(role=="知识管理员"){
			useridd="";
		}else{
			useridd=userid;
		}	
		ControlWordCount('comment');
		calculatetotalpage(useridd);	
		currentpage = 1;
		paginator(totalpage,currentpage);
		initPage(1,useridd);
		
	});	
	function addMessage(open){
		if($('#add_content').val()==""){
			alert("回复内容不能为空");
			return;
		}
		$.ajax({
			async : false,
			cache : false,
			type : 'POST',
			dataType : "json",
			data : {
				user_id : userid,
				touser_id : $('#userid').val(),
				message_content : $('#add_content').val().replace(/ /g,"&nbsp").replace(/[\n\r]/g, "<br>"),
				message_parentid : $('#id').val(),
				message_abid : $('#id').val(),
				message_open : open
			},
			url : "../message/addMessage",
			error : function() {
				alert('请求失败');
			},
			success : function(data) {
				if (data==1) {
					$('#add_content').val("");
					calculatetotalpage(useridd);
					currentpage=totalpage;
					paginator(totalpage,currentpage);
					initPage(totalpage,useridd);
				}
			}
		});//AJAX结束	
		//当时被提问专家回复时，更新提问为回复状态
        if(userid==$('#touserid').val()){
        	$.ajax({
    			async : false,
    			cache : false,
    			type : 'POST',
    			dataType : "json",
    			data : {
    				id:$('#id').val()
    			},
    			url : "../message/updateMessage",
    			error : function() {
    				alert('请求失败');
    			},
    			success : function(data) {
    				/* alert(data);
    				alert($('#noreplycount').html());
    				//$('#noreplycount').val($('#noreplycount').val()-1); */
    			}
    		});//AJAX结束	
		}
	}
	function addReply(id,user_id,open){
		if($('#reply_content').val()==""){
			alert("回复内容不能为空");
			return;
		}			
		$.ajax({
			async : false,
			cache : false,
			type : 'POST',
			dataType : "json",
			data : {
				user_id : userid,
				touser_id : user_id,
				message_content : $('#reply_content').val().replace(/ /g,"&nbsp").replace(/[\n\r]/g, "<br>"),
				message_parentid : id,
				message_abid : $('#id').val(),
				message_open : open
			},
			url : "../message/addMessage",
			error : function() {
				alert('请求失败');
			},
			success : function(data) {
				if (data==1) {
					$('#reply_content').val("");
					$('#reply_comment').remove();
					//针对某条评论回复之后在评论下方显示
					$('#replydiv_' + id).show();
					$('#replydiv_' + id + ' span').html(parseInt($('#replydiv_' + id + ' span').html()) + 1);
					$('#image_' + id).attr('src','../../image/icon/down.png');
					downreply(id,useridd);
				}
			}
		});//AJAX结束	
		
	}
	function showtextarea(id,userid,username){
		$("#reply_comment").remove();
		var li="";
		li += '<div id="reply_comment" style="margin-top: 10px; padding-right: 10px; float: right;">';
		li += '<textarea id="reply_content" onKeyUp="ControlWordCount(&quot;reply_content&quot;,&quot;reply_count&quot;,'+message_length+')" rows="2" cols="120" style="width: 100%;" placeholder="回复:'+username+'"></textarea>';
		li += '<button type="button" class="btn btn-default" onclick="addReply(&quot;'+id+'&quot;,&quot;'+userid+'&quot;,&quot;不公开&quot;)" style="float: right; margin-left: 5px">私密回复</button>';
		li += '<button type="button" class="btn btn-default" onclick="addReply(&quot;'+id+'&quot;,&quot;'+userid+'&quot;,&quot;公开&quot;)" style="float: right; margin-left: 5px">公开回复</button>';
		li += '<p style="float: right; margin-top: 5px">你还可以输入<span id="reply_count">'+message_length+'</span>个字</p>';
		li += '</div>';
		$("#body_" + id).append(li);
	}
	//删除评论(普通用户)
	function deleteMessage(id,pid) {
		$.ajax({
			async : false,
			cache : false,
			type : 'POST',
			dataType : "json",
			data : {
				id : id
			},
			url : "../message/deleteMessage",
			error : function() {
				alert('请求失败');
			},
			success : function(data) {	
				if (data != 0) {
					if(pid==""){
						calculatetotalpage(useridd);
						if(currentpage>totalpage){
							currentpage=currentpage-1;
							paginator(totalpage,currentpage);
							initPage(currentpage,useridd);
						}
						else{
							paginator(totalpage,currentpage);
							initPage(currentpage,useridd);
						}
					}
					else{
						var count=parseInt($('#replydiv_'+pid+' span').html())-1;		
						$('#replydiv_'+pid+' span').html(count);	
						if(count==0){	
							$('#image_'+pid).attr('src','../../image/icon/down.png');
							$('#replydiv_'+pid).hide();
						}
						$('#li_'+id).remove();					
					}
				}
			}
		});//AJAX结束 
	}
    function illegalMessage(id,pid,userid){
    	$.ajax({
			async : false,
			cache : false,
			type : 'POST',
			dataType : "json",
			data : {
				id : id,
				userid : userid
			},
			url : "../message/illegalMessage",
			error : function() {
				alert('请求失败');
			},
			success : function(data) {	
				if (data != 0) {
					if(pid==""){
						calculatetotalpage(useridd);
						if(currentpage>totalpage){
							currentpage=currentpage-1;
							paginator(totalpage,currentpage);
							initPage(currentpage,useridd);
						}
						else{
							paginator(totalpage,currentpage);
							initPage(currentpage,useridd);
						}
					}
					else{
						var count=parseInt($('#replydiv_'+pid+' span').html())-1;		
						$('#replydiv_'+pid+' span').html(count);	
						if(count==0){	
							$('#image_'+pid).attr('src','../../image/icon/down.png');
							$('#replydiv_'+pid).hide();
						}
						$('#li_'+id).remove();					
					}
				}
			}
		});//AJAX结束 
	}
    function waterMessage(id,pid,userid){
    	$.ajax({
			async : false,
			cache : false,
			type : 'POST',
			dataType : "json",
			data : {
				id : id,
				userid : userid
			},
			url : "../message/waterMessage",
			error : function() {
				alert('请求失败');
			},
			success : function(data) {	
				if (data != 0) {
					if(pid==""){
						calculatetotalpage(useridd);
						if(currentpage>totalpage){
							currentpage=currentpage-1;
							paginator(totalpage,currentpage);
							initPage(currentpage,useridd);
						}
						else{
							paginator(totalpage,currentpage);
							initPage(currentpage,useridd);
						}
					}
					else{
						var count=parseInt($('#replydiv_'+pid+' span').html())-1;		
						$('#replydiv_'+pid+' span').html(count);	
						if(count==0){	
							$('#image_'+pid).attr('src','../../image/icon/down.png');
							$('#replydiv_'+pid).hide();
						}
						$('#li_'+id).remove();					
					}
				}
			}
		});//AJAX结束 
	}
	//点击向下图标获取某条留言的回复
	function downreply(id,useridd) {
		//留言的回复列表没有显示出来
		if ($('#image_' + id).attr('src') == '../../image/icon/down.png') {
			$('#image_' + id).attr('src', '../../image/icon/up.png');
					$.ajax({
						async : false,
						cache : false,
						type : 'POST',
						dataType : "json",
						data : {
							message_parentid : id,
							user_id : useridd
						},
						url : "../message/getMessageList",
						error : function() {
							alert('请求失败');
						},
						success : function(data) {
							if (data.length > 0) {
								$("#reply_" + id).html("");
								var li = "";
								for (var i = 0; i < data.length; i++) {
									if(data[i].message_open=="公开"||data[i].user_id==userid||data[i].touser_id==userid){
										li += '<li id="li_'+data[i].message_id+'" class="media" style="margin-top: 0px; margin-left: 0px; margin-right: 0px;">';
										li += '<div class="media-left">';
										li += '<img class="media-object img-circle" src="../../image/user/'+data[i].picture_url+'" style="height: 50px; width: 50px;"><br>';
										li += '</div>';
										li += '<div class="media-body">';
										li += '<span class="text-primary">'+data[i].user_name+'&nbsp;&nbsp;回复:&nbsp;&nbsp;'+data[i].touser_name+'</span>';
										li += '<div class="row">';
										li += '<div class="col-md-12" style="margin-bottom: 10px;">';
										li += '<span>'+data[i].message_content+'</span>';
										li += '</div>';
										li += '</div>';
										li += '<div class="ds-comment-footer">';
										li += '<div style="float: left;">';
										li += '<a onclick="showtextarea(&quot;'+ id+ '&quot;,&quot;'+data[i].user_id+'&quot;,&quot;'+data[i].user_name+'&quot;)"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span>回复</a>';
										li += '</div>';			
										li += '<div style="float: right;">';
										li += '<span>'+data[i].message_time+'</span>';
										li += '</div>';
										li += '<div style="float: right;margin-right:10px;">';
										if(data[i].user_id==userid||role=="知识管理员"){
											li += '<a onclick="deleteMessage(&quot;'+ data[i].message_id+ '&quot;,&quot;'+ id+ '&quot;)" style="margin:5px;"><span class="text-primary">删除</span></a>';
										}
										if(role=="知识管理员"){
											li += '<a onclick="illegalMessage(&quot;'+ data[i].message_id+ '&quot;,&quot;'+ id+ '&quot;,&quot;'+ data[i].user_id+ '&quot;)" style="margin:5px;"><span class="text-primary">非法评论</span></a>';
											li += '<a onclick="waterMessage(&quot;'+ data[i].message_id+ '&quot;,&quot;'+ id+ '&quot;,&quot;'+ data[i].user_id+ '&quot;)" style="margin:5px;"><span class="text-primary">灌水评论</span></a>';
										}
										li += '</div>';	
										li += '</div>';
										li += '</div>';
										li += '</li>';
									}
								}
								$("#reply_" + id).append(li);
							}
						}
					});//AJAX结束	
			return;
		}
		//留言的回复列表已经显示出来
		if ($('#image_' + id).attr('src') == '../../image/icon/up.png') {
			$('#image_' + id).attr('src', '../../image/icon/down.png');
			$("#reply_" + id).html("");
			return;
		}
	}
	
	function initPage(page,useridd) {
		$("#info").html("");
		$.ajax({
			url : '../message/getMessageList',
			type : 'post',
			async : false,
			data : {
					page : (page - 1) * rows,
					rows : rows,
					message_id : $('#id').val(),
					message_type : "limit",
					user_id : useridd
			},
			success : function(result) {
				var data = eval(result);
				$("#info").html("");
				//循环
				var li = "";
				for (var i = 0; i < data.length; i++) {			
						li += '<li class="media" style="margin-top: 5px; margin-left: 50px; margin-right: 50px;">';
						li += '<div class="media-left">';
						li += '<img class="media-object img-circle" src="../../image/user/'+data[i].picture_url+'" style="height: 80px; width: 80px;"><br>';
						li += '<span class="text-primary" style="padding-top: 30px;text-align:center;">'+data[i].user_name+'</span>';
						li += '</div>';
						li += '<div class="media-body" id="body_'+data[i].message_id+'" style="padding-left:20px;">';
						li += '<div class="row">';
						li += '<div class="col-md-12" style="margin-bottom: 10px; min-height: 100px;">';
						li += '<span>'+data[i].message_content+'</span>';
						li += '</div>';
						li += '</div>';
						li += '<div class="ds-comment-footer">';	
						if(data[i].message_parentid!=''&&data[i].message_parentid!=null){
							li += '<div style="float: left;">';
							li += '<a onclick="showtextarea(&quot;'+ data[i].message_id+ '&quot;,&quot;'+data[i].user_id+'&quot;,&quot;'+data[i].user_name+'&quot;)"><span class="glyphicon glyphicon-comment" aria-hidden="true">回复</span></a>';
							li += '</div>';
							if(data[i].reply_count!=0){
								li += '<div id="replydiv_'+data[i].message_id+'" style="float: left;">&nbsp;&nbsp;';
								li += '<img id="image_'+data[i].message_id+'" onclick="downreply(&quot;'+ data[i].message_id+ '&quot;)" style="height: 15px; width: 15px;" src="../../image/icon/down.png"> <span>'+data[i].reply_count+'</span>条回复';
								li += '</div>';	
							}
							else{
								li += '<div id="replydiv_'+data[i].message_id+'" style="float: left;" hidden="true">&nbsp;&nbsp;';
								li += '<img id="image_'+data[i].message_id+'" onclick="downreply(&quot;'+ data[i].message_id+ '&quot;)" style="height: 15px; width: 15px;" src="../../image/icon/down.png"> <span>'+data[i].reply_count+'</span>条回复';
								li += '</div>';
							}
						}	
						li += '<div style="float: right;">';
						li += '<span>'+data[i].message_time+'</span>';
						li += '</div>';
						li += '<div style="float: right;margin-right:10px;">';
						if((data[i].user_id==userid||role=="知识管理员") && data[i].message_parentid!='' && data[i].message_parentid!=null){
							li += '<a onclick="deleteMessage(&quot;'+ data[i].message_id+ '&quot;,&quot;&quot;)" style="margin:5px;"><span class="text-primary">删除</span></a>';					
						}	
						if(role=="知识管理员" && data[i].message_parentid!='' && data[i].message_parentid!=null){
							li += '<a onclick="illegalMessage(&quot;'+ data[i].message_id+ '&quot;,&quot;&quot;,&quot;'+ data[i].user_id+ '&quot;)" style="margin:5px;"><span class="text-primary">非法评论</span></a>';
							li += '<a onclick="waterMessage(&quot;'+ data[i].message_id+ '&quot;,&quot;&quot;,&quot;'+ data[i].user_id+ '&quot;)" style="margin:5px;"><span class="text-primary">灌水评论</span></a>';
						}
						li += '</div>';
						li += '</div><hr>';
						li += '<ul class="media-list" id="reply_'+data[i].message_id+'"></ul>';
						li += '</div>';
     					li += '</li>';				
				}
				//循环
				$("#info").append(li);
			}
		});
	}
	//计算出totalpage
	function calculatetotalpage(useridd) {
		$.ajax({
			url : '../message/getMessageCount',
			type : 'post',
			async : false,
			data : {
				message_id : $('#id').val(),
			    user_id : useridd
			},
			success : function(result) {
				if (result % rows == 0) {
					totalpage = parseInt(result / rows);
				}
				if (result % rows != 0) {
					totalpage = parseInt(result / rows) + 1;
				}
				//paginator(totalpage);
			}
		});
	}
	function paginator(value,page) {
		var element = $('#paginator');
		var options = {
			bootstrapMajorVersion : 3, //对应的bootstrap版本
			currentPage : page, //当前页数，这里是用的EL表达式，获取从后台传过来的值
			numberOfPages : 6, //每页页数
			totalPages : value, //总页数，这里是用的EL表达式，获取从后台传过来的值
			shouldShowPage : true,//是否显示该按钮
			itemTexts : function(type, page, current) {//设置显示的样式，默认是箭头
				switch (type) {
					case "first" :
						return "首页";
					case "prev" :
						return "上一页";
					case "next" :
						return "下一页";
					case "last" :
						return "末页";
					case "page" :
						return page;
				}
			},
			onPageClicked : function(event, originalEvent, type, page) {
				currentpage=page;
				initPage(page,useridd);
			}
		};
		element.bootstrapPaginator(options);
	}
</script>
</html>